<template>
  <div class="login-container">
    <el-card class="box-card">
      <div class="header">
        <h3>嗨购商城后台管理系统</h3>
      </div>
      <el-divider border-style="dashed" />
      <el-form
        ref="ruleFormRef"
        :model="userInfo"
        :rules="rules"
        class="demo-userInfo"
        label-position="left"
        size="large"
      >
        <el-form-item label="用户名" prop="adminname" label-width="70px">
          <el-input v-model="userInfo.adminname" />
        </el-form-item>
        <el-form-item label="密码" prop="password" label-width="70px">
          <el-input v-model="userInfo.password" show-password />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="button" @click="userLogin"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { User } from '@/types/user'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { login } from '@/api/user'
import { useUserStore } from '@/store/user'
import { useRouter, useRoute } from 'vue-router'
import { operator } from '@/router'

const store = useUserStore()
const router = useRouter()
const route = useRoute()

const userInfo = ref<User>({
  adminname: 'admin',
  password: '123456'
})
const ruleFormRef = ref<FormInstance>()

const rules = ref<FormRules<User>>({
  adminname: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 3, max: 10, message: '请输入5-10位用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 5, max: 10, message: '请输入5-10位的密码', trigger: 'blur' }
  ]
})

// 登录
const userLogin = async () => {
  if (!ruleFormRef) return
  // 组件form表单的回调
  ruleFormRef.value?.validate(async valid => {
    if (valid) {
      const res = await login(userInfo.value)
      // 请求成功
      if (res.data.code === 200) {
        store.setToken(res.data.data.token)
        // 消息提示
        ElMessage({
          message: res.data.message,
          type: 'success',
          duration: 800,
          onClose: () => {
            operator.isInit = true
            // 跳转首页
            if (route.query.redirect) {
              console.log(route.query.redirect)
              router.push(route.query.redirect as string)
            } else {
              router.replace('/')
            }
          }
        })
      } else {
        // 请求失败，消息提示
        ElMessage.error(res.data.message)
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.login-container {
  height: 100%;
  // background-repeat: no-repeat;
  background-size: cover;
  background-color: skyblue;
  background-repeat: no-repeat;
  background-image: url(https://tukuimg.bdstatic.com/cms/a10a3360e2cc8a9ecb4c0a26a5f0d384.jpeg);
  .box-card {
    width: 440px;
    height: 316px;
  margin-left:200px;
    .header {
      text-align: center;
    }
  }
  display: flex;
  // justify-content: center;
  align-items: center;
  .button {
    margin: auto auto;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 0 auto;
  }
}
</style>
